<template>
	<view>
		<view v-if="(item || null) != null" class="business-card border-radius-main">
			<view class="business-header">
				<view class="avatar-wrapper" :data-value="'/pages/fcc/classinfo/companycard-detail/companycard-detail?id='+item.id" @tap="url_event">
				  <image v-if="item.logo" :src="item.logo" class="avatar" mode="aspectFill"></image>
				  <view v-else class="avatar-placeholder">
				     <text v-if="item.name !=''">{{ getFirstChar(item.name) }}</text>
					 <text v-else>{{ getFirstChar(item.user.nickname) }}</text>
				  </view>
				</view>
				<view class="business-info">
					<view class="business-name-container" :data-value="'/pages/fcc/classinfo/companycard-detail/companycard-detail?id='+item.id" @tap="url_event">
						<view v-if="propSpec == 1" class="business-name spec">
							<text class="t1">{{$t('fengcheche.classinfo.zhiding')}}</text>
							<text v-if="item.name !=''">{{ item.name }}</text>
							<text v-else>{{ item.user.nickname }}</text>
						</view>
						<view v-else class="business-name">
							<text v-if="item.name !=''">{{ item.name }}</text>
							<text v-else>{{ item.user.nickname }}</text>
						</view>
						<text class="business-distance" v-if="item.distance">{{$t('extraction-address.extraction-address.42v8tv')}} {{item.distance}}</text>
					</view>
					<!--<view class="business-location">
						<uni-icons type="chatboxes" size="14" color="#999"></uni-icons>
						<text class="location-text">{{$t('fengcheche.classinfo.contactwx')}}：{{ item.contact_wx_view }}</text>
					</view>-->
					<view class="business-location">
						<uni-icons type="location" size="14" color="#999"></uni-icons>
						<text class="location-text">{{ item.province_name }} {{ item.city_name }}</text>
					</view>
				</view>
			</view>
			
			<!-- 添加公司简介描述 -->
			<view v-if="propData.com_describe" class="description-row" :data-value="'/pages/fcc/classinfo/companycard-detail/companycard-detail?id='+propData.id" @tap="url_event">
			  <text class="description-text">{{ propData.com_describe }}</text>
			</view>
			
			<view class="business-categories">
				<text class="category-badge">{{item.category.name}}</text>
				<block v-if="item.com_label_arr.length > 0">
					<text v-for="(item2, index2) in item.com_label_arr" :key="index2" class="category-badge">
					{{ item2 }}
					</text>
				</block>
			</view>
			
			<view v-if="item.com_zhengshu_arr.length > 0" class="business-certificates">
				<view v-for="(item2, index2) in item.com_zhengshu_arr" :key="index2" class="certificate-badge">
					<uni-icons type="medal" size="12" color="#f59e0b"></uni-icons>
					<text>{{ item2.name }}</text>
				</view>
			</view>
			
			<view class="business-footer pr">
				<view v-if="(item.company.the_level_content || null) != null && (item.company.the_level_content.is_company_list_tel || null) != null && parseInt(item.company.the_level_content.is_company_list_tel.value) == 1" class="business-phone" @tap="call_event" :data-value="item.contact_tel">
					<uni-icons type="phone" size="18" color="#999"></uni-icons>
					<text class="phone-number">{{ item.contact_tel_view }}</text>
				</view>
				<button class="view-info-btn pa" :data-value="'/pages/fcc/classinfo/companycard-detail/companycard-detail?id='+item.id" @tap="url_event">查看名片</button>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
		<!-- #endif -->
	</view>
</template>

<script>
	const app = getApp();
	// #ifdef APP-PLUS
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	// #endif
	export default {
		name:"card-item",
		data() {
			return {
				permissionID: '',
				site_for_led: app.globalData.data.site_for_led,
			};
		},
		components: {
			// #ifdef APP-PLUS
			ykAuthpup
			// #endif
		},
		props: {
			propConfig: {
				type: [String, Object],
				default: null
			},
			propData: {
			    type: Object,
			    default: () => {
			        return {};
			    },
			},
			propSpec: {
				type: [String, Number],
				default: 0
			}
		},
		//对传值进行计算
		computed:{
			item(){
				return this.propData || null;
			}
		},
		methods: {
			// url事件
			url_event(e) {
				app.globalData.url_event(e);
			},
			
			// 获取名字首字
			getFirstChar(name) {
				return name ? name.charAt(0) : '?';
			},

			// #ifdef APP-PLUS
			//用户授权权限后的回调
			changeAuth(e){
				// 如果是头像查看的权限返回
				if(this.permissionID == 'WRITE_EXTERNAL_STORAGE')
				{
					// 直接下载
					app.globalData.save_image_by_url(this.avatar);
				}else{
					app.globalData.call_tel(e);
				}
			},
			// #endif
			
			// 打电话
			call_event(e){
				var tel = e.currentTarget.dataset.value;
				if(app.globalData.is_android())
				{
					this.permissionID = 'CALL_PHONE';
					setTimeout(()=>{
						this.$refs['authpup'].open(tel);
					},500);
				}else{
					app.globalData.call_tel(tel);
				}
			}
		}
	}
</script>

<style>
	.business-card {
	  background-color: #ffffff;
	  padding: 20rpx 20rpx 10rpx;
	  margin:0 20rpx 20rpx;
	  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}
	
	.business-header {
	  display: flex;
	  gap: 20rpx;
	}
	
	
	.avatar-wrapper {
	  flex-shrink: 0;
	  margin-right: 0rpx;
	}
	
	.avatar {
	  width: 80rpx;
	  height: 80rpx;
	  border-radius: 50%;
	}
	
	.avatar-placeholder {
	  width: 80rpx;
	  height: 80rpx;
	  border-radius: 50%;
	  background: linear-gradient(135deg, #a855f7 0%, #4f46e5 100%);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: white;
	  font-size: 36rpx;
	  font-weight: 600;
	}
	
	
	.business-info {
	  flex: 1;
	}
	
	.business-name-container {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.business-name {
	  font-size: 32rpx;
	  font-weight: bold;
	}
	.business-name.spec{
		color:red;
	}
	.business-name.spec .t1{
		background-color: red;
		color:#fff;
		padding:0 15rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
		font-size:28rpx;
	}
	
	.business-distance {
	  font-size: 24rpx;
	  color: #999;
	}
	
	.business-contact {
	  font-size: 26rpx;
	  color: #666;
	  margin-top: 4rpx;
	}
	
	.business-location {
	  display: flex;
	  align-items: center;
	  margin-top: 8rpx;
	}
	
	.location-text {
	  font-size: 24rpx;
	  color: #999;
	  margin-left: 4rpx;
	}
	
	.business-description {
	  font-size: 26rpx;
	  color: #666;
	  background-color: #f9f9f9;
	  padding: 16rpx;
	  border-radius: 8rpx;
	  margin-top: 16rpx;
	}
	
	.business-categories {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10rpx;
	  margin-top: 16rpx;
	}
	
	.category-badge {
	  font-size: 24rpx;
	  color: #666;
	  background-color: #f0f0f0;
	  padding: 4rpx 12rpx;
	  border-radius: 20rpx;
	}
	
	.business-certificates {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10rpx;
	  margin-top: 16rpx;
	}
	
	.certificate-badge {
	  display: flex;
	  align-items: center;
	  font-size: 24rpx;
	  color: #f59e0b;
	  border: 1rpx solid #f59e0b;
	  padding: 4rpx 12rpx;
	  border-radius: 20rpx;
	}
	
	.business-images {
	  display: flex;
	  gap: 10rpx;
	  margin-top: 16rpx;
	}
	
	.business-image {
	  width: 220rpx;
	  height: 160rpx;
	  border-radius: 8rpx;
	}
	
	.business-footer {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-top: 10rpx;
	  padding-top: 10rpx;
	  border-top: 1rpx solid #eee;
	  height:60rpx;
	}
	
	.business-phone {
	  display: flex;
	  align-items: center;
	}
	.phone-number {
	  font-size: 32rpx;
	  font-weight: bold;
	  margin-left: 8rpx;
	}
	.view-info-btn {
	  font-size: 28rpx;
	  color: #ffffff;
	  background-color: #007aff;
	  padding:0rpx 25rpx;
	  border-radius:22.5rpx;
	  margin-left: auto;
	  right:0;
	  top:16rpx;
	  height:45rpx;
	  line-height:45rpx;
	}
/* 添加简介描述样式 */
.description-row {
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #f9fafb;
  border-radius: 12rpx;
  border-left: 4rpx solid #10b981;
}

.description-text {
  font-size: 26rpx;
  color: #4b5563;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 改为最多显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>